<template>
  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
        <!-- <img class="aui-navbar__brand-lg" style="width:67px; height:36px;margin-right: 5px;" src="@/assets/img/chint-logo.jpg" /> -->
        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
      </h1>
    </div>
    <div :class="['aui-navbar__body',{'menu-fold':$store.state.sidebarFoldType==1}]">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
        <el-menu-item v-if="$store.state.sidebarFoldType==1" index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true">
            <use xlink:href="#icon-outdent"></use>
          </svg>
        </el-menu-item>
        <el-menu-item index="2" class="narmenu" v-if="$store.state.navbarMenu=='2'">
          <el-popover v-model="menuVisible" placement="bottom-start" trigger="click">
            <uni-navbar-module :data="menuModules" @click="moduleChangeHandle">
            </uni-navbar-module>
            <div slot="reference">
              <span class="el-dropdown-link">
                <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
                  <use :xlink:href="`#${curModule.icon}`"></use>
                </svg><span>{{ curModule.name }}</span>
              </span>
            </div>
          </el-popover>
        </el-menu-item>
      </el-menu>
      <uni-navbar-module-all v-if="$store.state.navbarMenu=='3'||$store.state.navbarMenu=='5'" :data="menuModules" @click="moduleAllChangeHandle" :defaultModel="curModule.id" :class="{'aui-navbar__menu-all-5':$store.state.navbarMenu=='5'}">
      </uni-navbar-module-all>
      <!-- <div> -->

      <!-- </div> -->
      <!-- <el-menu class="aui-navbar__menu aui-navbar__menu-level  mr-auto " mode="horizontal"
        v-if="$store.state.navbarMenu=='3'">
        <el-menu-item :index="item.id" :class="activeMenuIndex==item.id?'aui-navbar__menu_active':''"
          v-for="item in moduleList" :key="item.id" @click="moduleAllChangeHandle(item)">
          <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
            <use :xlink:href="`#${item.icon}`"></use>
          </svg>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu> -->
      <!-- </div> -->
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <el-menu-item index="1" v-if="$store.state.navbarMenu=='1'&& menuModules.length > 0">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
                <use :xlink:href="`#${curModule.icon}`"></use>
              </svg><span>{{ curModule.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in menuModules" :key="item.id" @click.native="changeModule(item)">
                <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <!-- 应用中心 -->
        <el-menu-item index="2" class="narmenu" v-if="$store.state.navbarMenu=='4'||$store.state.navbarMenu=='5'">
          <el-popover v-model="menuVisible" placement="bottom" trigger="click">
            <uni-navbar-menu :data="menuModules" :layoutX="$store.state.navbarMenuAppLayoutX" :ico="$store.state.navbarMenuAppIco" :search="$store.state.navbarMenuAppSearch" :modelName="$store.state.navbarMenuAppModelName" @click="hideMenuVisible">
            </uni-navbar-menu>
            <div slot="reference">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true" slot="reference">
                <use xlink:href="#icon-appstore"></use>
              </svg>
            </div>
          </el-popover>
        </el-menu-item>
        <!-- 待办中心 -->
        <el-menu-item index="21" @click="gotoRoute(CDATA.MODULE_MYWORK, CDATA.MENUID_MYWORK_APPLY)">
          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
            <use xlink:href="#icon-solution"></use>
          </svg>
        </el-menu-item>
        <!-- 消息中心 -->
        <el-menu-item index="22" @click="gotoRoute(CDATA.MODULE_MYMSG, CDATA.MENUID_MSG_NOTREAD)">
          <div class="navbar-msg">
            <el-badge :value="navbarMsg.total" :max="99" :hidden="navbarMsg.total <= 0">
              <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                <use xlink:href="#icon-bell"></use>
              </svg>
            </el-badge>
          </div>
        </el-menu-item>
        <el-menu-item index="3" @click="fullscreenHandle()">
          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
            <use xlink:href="#icon-fullscreen"></use>
          </svg>
        </el-menu-item>
        <el-menu-item index="4" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <img v-if="$store.state.user.headUrl" :src="$store.state.user.headUrl">
              <img v-else src="~@/assets/img/avatar.png">
              <span>{{ $store.state.user.realName }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 第一组 -->
              <el-dropdown-item @click.native="gotoRoute(CDATA.MODULE_USER, CDATA.MENUID_USER_FIRST)">
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                {{ $t('personalCenter') }}
              </el-dropdown-item>

              <el-dropdown-item @click.native="updatePasswordHandle()">
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-securityscan"></use>
                </svg>
                {{ $t('updatePassword.title') }}
              </el-dropdown-item>

              <HR style="border:1 dashed #000" width="80%" SIZE="1" />
              <!-- 第二组 -->
              <el-dropdown-item @click.native="openTheme()">
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-skin"></use>
                </svg>
                {{ $t('themeSetting') }}
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
              </el-dropdown-item>
              <HR style="border:1 dashed #000" width="80%" SIZE="1" />
              <el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-earth"></use>
                </svg>
                {{ val._lang }}
                <svg v-show="$i18n.locale === key" class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-check"></use>
                </svg>
              </el-dropdown-item>
              <HR style="border:1 dashed #000" width="80%" SIZE="1" />
              <!-- 第三组 -->
              <el-dropdown-item @click.native="logoutHandle()">
                <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
                  <use xlink:href="#icon-logout"></use>
                </svg>
                {{ $t('logout') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
import { messages } from '@/i18n'
import screenfull from 'screenfull'
import UpdatePassword from './modules/user/update-password'
import { clearLoginInfo } from '@/utils'
// import navbarMsg from './main-navbar-msg'
import { menuId } from '@/views/modules/msg/msgRecord.json'
import { getRouteByMenuId, getMenuById } from './layout/common/layout'
// 读取常量
import * as CDATA from '@/router/config'

export default {
  inject: ['refresh'],
  data () {
    return {
      CDATA,
      menuVisible: false,
      visable: false,
      activeMenuIndex: '',
      i18nMessages: messages,
      updatePassowrdVisible: false,
      navbarMsg: {
        limit: 5,
        list: [],
        total: 0
      },
      menu: {
        // 对应数据库个人中心ID
        id: '1121324923284463617'
      },
      menuId: menuId,
      notifyObj: {}
    }
  },
  computed: {
    menuType () {
      return this.$store.state.menuType
    },
    // workbenchMenuList: function () {
    //   let menunList = window.SITE_CONFIG['menuList']
    //   let newArr = menunList.filter((item, index, arr) => item.client === 'C01')
    //   return newArr
    // },
    // applicationMenuList: function () {
    //   let menunList = window.SITE_CONFIG['menuList']
    //   let newArr = menunList.filter((item, index, arr) => item.client === 'C21')
    //   return newArr
    // },
    // 过滤个人中心待办等模块
    menuModules () {
      let modules = []
      for (const index in this.moduleList) {
        let mod = this.moduleList[index]
        if (mod.id === this.CDATA.MODULE_MYMSG) {
          continue
        } else if (mod.id === this.CDATA.MODULE_MYWORK) {
          continue
        } else if (mod.id === this.CDATA.MODULE_USER) {
          continue
        } else if (!mod.showFlag) {
          continue
        }
        modules = modules.concat(mod)
      }
      return modules
    }
  },
  props: {
    openTheme: {
      type: Function,
      required: true
    },
    curModule: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    },
    changeModule: {
      type: Function,
      required: true
    },
    moduleList: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    }
  },
  components: {
    UpdatePassword // ,
    // navbarMsg
  },
  created () {
    this.activeMenuIndex = this.curModule.id
    this.getNavMsg()
  },
  methods: {
    // handleClick (tab, event) {
    //   let menuId = tab.$attrs.index
    //   this.moduleList.forEach(e => {
    //     if (e.id === menuId) {
    //       this.changeModule(e)
    //     }
    //   })
    // },
    hideMenuVisible (menu) {
      let menuId = menu.id
      let route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
      if (route) {
        const { iframeURL } = route.meta
        const { _blank } = route.params
        if (typeof (_blank) !== 'undefined' && _blank.toString() !== '0' && _blank.toString() !== 'false') {
          window.open(iframeURL, '_blank')
          this.$userBehavior.sendUserBehavior(iframeURL, route.meta.menuId, 0, 'openOtherMenu', route.meta.title)
        } else {
          this.$router.push({ name: route.name, params: route.params })
          this.$userBehavior.sendUserBehavior(route.path, route.meta.menuId, 0, 'openMenu', route.meta.title)
        }
      }
      // 隐藏
      this.menuVisible = false
      // 切换模块
      this.moduleList.forEach(e => {
        if (e.id === menu.modelId) {
          this.changeModule(e)
        }
      })
    },
    moduleChangeHandle (m) {
      this.menuVisible = false
      this.changeModule(m)
    },
    moduleAllChangeHandle (m) {
      // this.activeMenuIndex = m.id
      this.changeModule(m)
    },
    gotoRoute (moduleId, menuId) {
      // console.log(1)
      let curModule = getMenuById(moduleId)
      if (curModule) {
        this.changeModule(curModule)
        this.gotoRouteHandle(menuId)
      }
    },
    // 全屏
    fullscreenHandle () {
      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t('fullscreen.prompt'),
          type: 'warning',
          duration: 500
        })
      }
      screenfull.toggle()
    },
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/logout').then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          clearLoginInfo()
          this.$router.push({ name: 'login' })
        }).catch(() => { })
      }).catch(() => { })
    },
    // 获取首页信息中心
    getNavMsg () {
      return this.$http.get('/msg/msgRecord/getNavMsg', { params: { limit: this.navbarMsg.limit, searchFlag: '1' } }).then(({ data: res }) => {
        this.navbarMsg = {
          ...this.navbarMsg,
          ...res.data
        }
        // if (this.navbarMsg && this.navbarMsg.list && this.navbarMsg.list.length > 0) {
        //   let notify = this.$notify({
        //     title: '您有新的消息',
        //     customClass: 'uniedp-notify',
        //     message: (
        //       <div>
        //         <el-table class="el-table--notify" data={this.navbarMsg.list} size="mini" show-header={false}
        //           on-row-click={(row, column, event) => this.rowClick(row)}>
        //           <el-table-column width="260" property="title" label="标题" show-overflow-tooltip={true}></el-table-column>
        //         </el-table>
        //         <div class="navbar-msg_footer" v-show={this.navbarMsg.total > this.navbarMsg.limit}>
        //           <a on-click={() => this.moreClick()}>{this.$t('msgRecord.seeMore')}</a>
        //         </div>
        //       </div>
        //     ),
        //     position: 'bottom-right',
        //     duration: 10000 // 10秒
        //   })
        //   this.notifyObj = notify
        // }
      }).catch(() => {
      })
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle (menuId, params) {
      let route = getRouteByMenuId(menuId)
      if (route) {
        this.$router.push({ name: route.name, params: params || route.params })
      } else {
        console.log('error', `${menuId} 未获取到有效路由！`)
      }
    },
    rowClick (row) {
      this.gotoRouteHandle(this.menuId, row)
      this.notifyObj.close()
    },
    moreClick () {
      this.gotoRouteHandle(this.menuId)
      this.notifyObj.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.aui-navbar__menu-level {
  max-width: calc(100vw - 180px - 46px - 46px - 46px - 110px - 50px);
}
.el-table--navbar .el-table__row td {
  font-size: 14px;
  cursor: pointer;
}
.navbar-msg_footer {
  margin-top: 5px;
  margin-right: 10px;
  font-size: 12px;
  float: right;
}
.navbar-msg_footer a:hover {
  cursor: pointer;
}
.uniedp-notify {
  padding: 10px 10px 0 10px;
  margin: 0px;
}
.el-table--notify {
  padding: 0px;
  margin: 0px;
}
.el-table--notify .el-table__row td {
  font-size: 12px;
  cursor: pointer;
  height: 12px;
  line-height: 12px;
  padding: 0px;
}
.uniedp-notify .el-notification__title {
  font-size: 12px;
}
.aui-navbar .el-dropdown-link.el-dropdown-selfdefine {
  height: 100%;
  display: block;
}
.aui-navbar__menu {
  .narmenu {
    padding: 0;
    .el-popover__reference {
      padding: 0 14px;
    }
  }
}
</style>
